<template>
  <ma-crud ref="crudRef" :columns="columns" :options="crud">
    <template #tableAfterButtons>
      <a-button @click="handleRefreshCache" :loading="refreshLoading">刷新缓存</a-button>
    </template>
    <template #search-configName="{ searchForm, component }">
      <a-input
        v-model.trim="searchForm[component.dataIndex]"
        :style="{ width: '240px' }"
        allow-clear
        placeholder="请输入参数名称"
      >
        <template #prefix>
          <icon-search />
        </template>
      </a-input>
    </template>
  </ma-crud>
</template>
<script lang="ts" name="Config" setup>
import { addConfig, delConfig, listConfig, refreshCache, updateConfig } from "@/api/system/config";
import { Message } from "@arco-design/web-vue";

const refreshLoading = ref(false);

const crud = reactive({
  id: "configId",
  pk: "configId",
  title: "参数查询",
  formLayout: "vertical",
  formOption: {
    width: 600,
    layout: [
      {
        formType: "grid",
        gutter: 16,
        cols: [
          { span: 12, formList: [{ dataIndex: "configName" }] },
          { span: 12, formList: [{ dataIndex: "configKey" }] },
          { span: 12, formList: [{ dataIndex: "configValue" }] },
          { span: 12, formList: [{ dataIndex: "configType" }] },
          { span: 24, formList: [{ dataIndex: "remark" }] }
        ]
      }
    ]
  },
  api: listConfig,
  showIndex: false,
  operationColumn: true,
  operationColumnAlign: "center",
  operationColumnWidth: 180,
  pageLayout: "normal",
  requestParams: { orderBy: "createTime", orderType: "desc" },
  add: { api: addConfig, auth: ["system:config:add"], text: "新增", show: true },
  delete: { api: delConfig, auth: ["system:config:delete"], text: "删除", show: true },
  edit: { api: updateConfig, auth: ["system:config:edit"], text: "编辑", show: true }
});

const columns = reactive([
  {
    title: "参数编号",
    dataIndex: "configId",
    slotName: "index",
    align: "center",
    hide: true
  },
  {
    title: "参数名称",
    dataIndex: "configName",
    align: "center",
    search: true,
    commonRules: {
      required: true,
      message: "请输入参数名称"
    }
  },
  {
    title: "参数键名",
    dataIndex: "configKey",
    slotName: "configKey",
    align: "center",
    commonRules: {
      required: true,
      message: "请输入参数键名"
    }
  },
  {
    title: "参数键值",
    dataIndex: "configValue",
    slotName: "configValue",
    align: "center",
    commonRules: {
      required: true,
      message: "请输入参数键值"
    }
  },
  {
    title: "系统内置",
    dataIndex: "configType",
    slotName: "configType",
    align: "center",
    formType: "radio",
    dict: {
      name: "sys_yes_no",
      cache: true,
      props: { label: "dictLabel", value: "dictValue" },
      translation: true,
      tagColors: true
    },
    addDefaultValue: 0
  },
  {
    title: "描述",
    dataIndex: "remark",
    align: "center",
    formType: "textarea",
    autoSize: { minRows: 3, maxRows: 6 },
    maxLength: 200,
    showWordLimit: true,
    hide: true
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    align: "center",
    addDisplay: false,
    editDisplay: false
  }
]);

/** 刷新缓存按钮操作 */
const handleRefreshCache = async () => {
  refreshLoading.value = true;
  try {
    await refreshCache();
    Message.success("刷新缓存成功");
  } finally {
    refreshLoading.value = false;
  }
};
</script>
